<template>
  <div>
    <sweet-scrollbar height="800px">

      <sweetAvatar />

      <div>
        <sweet-badge :value="1000" :max="999" class="item">
          <sweet-button>comments</sweet-button>
        </sweet-badge>
        <sweet-badge value="new" class="item">
          <sweet-button>comments</sweet-button>
        </sweet-badge>
        <sweet-badge is-dot class="item">
          <sweet-button type="primary" >
            <i class="sweetui-icon-share-l"></i>
          </sweet-button>  
        </sweet-badge>
      </div>

      <sweetImage />
      <sweet-empty :width="200" image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" description='description'/>
      <sweetDescriptions />
      <sweetCalendar />

      <sweet-carousel height="200" :loop="loop" :autoplay="true" :interval="2000">
        <sweet-carousel-item style="background-color: rgba(217, 229, 255, 0.8)">
          <h3 style="color: #475669;font-size: 18px;opacity: 0.75;line-height: 200px;margin: 0;text-align: center;">1</h3>
        </sweet-carousel-item>
        <sweet-carousel-item style="background-color: #5b7ede">
          <h3 style="color: #475669;font-size: 18px;opacity: 0.75;line-height: 200px;margin: 0;text-align: center;">2</h3>
        </sweet-carousel-item>
        <sweet-carousel-item style="background-color: rgba(217, 229, 255, 0.8)">
          <h3 style="color: #475669;font-size: 18px;opacity: 0.75;line-height: 200px;margin: 0;text-align: center;">3</h3>
        </sweet-carousel-item>
      </sweet-carousel>

      <sweetCollapse />

      <sweet-side-panel :is-open="true" align="right" width="400px">
        <h3>这里是侧收缩面板里的内容</h3>
      </sweet-side-panel>

      <sweetCard />

      <sweet-popover
        placement="top-start"
        title="Title"
        :width="200"
        append-to-body
        :teleported="true"
        trigger="hover"
        content="this is content, this is content, this is content"
      >
        <template #reference>
          <sweet-button class="m-2">Hover to activate</sweet-button>
        </template>
      </sweet-popover>

      <sweet-tag class="mr-8">Tag 1</sweet-tag>
      <sweet-tag class="mr-8" type="success">Tag 2</sweet-tag>
      <sweet-tag class="mr-8" type="info">Tag 3</sweet-tag>
      <sweet-tag class="mr-8" type="warning">Tag 4</sweet-tag>
      <sweet-tag class="mr-8" type="danger">Tag 5</sweet-tag>

      <sweet-timeline>
        <sweet-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
          {{ activity.content }}
        </sweet-timeline-item>
      </sweet-timeline>

      <!-- 抽屉 -->
      <sweetDrawer />

      <sweet-result title="404" sub-title="Sorry, request error">
        <template #icon>
          <sweet-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
        </template>
        <template #extra>
          <sweet-button type="primary">Back</sweet-button>
        </template>
      </sweet-result>

      <sweet-table :data="tableData" style="width: 100%">
        <sweet-table-column prop="date" label="日期"> </sweet-table-column>
        <sweet-table-column prop="name" label="姓名"> </sweet-table-column>
        <sweet-table-column prop="address" label="地址"> </sweet-table-column>
      </sweet-table>
      <sweetTableV2 />
      <sweetTreeTable />
      <sweetVirtualTable />
      <sweetTree />
      <sweetVirtualTree />


    </sweet-scrollbar>
  </div>
</template>
<script>
import sweetAvatar from './presentation-components/sweet-avatar.vue';
import sweetImage from './presentation-components/sweet-image.vue';
import sweetDescriptions from './presentation-components/sweet-descriptions.vue';
import sweetCalendar from './presentation-components/sweet-calendar.vue';
import sweetCollapse from './presentation-components/sweet-collapse.vue';
import sweetCard from './presentation-components/sweet-card.vue';
import sweetDrawer from './presentation-components/sweet-drawer.vue';
import sweetTableV2 from './presentation-components/sweet-table-v2.vue';
import sweetTreeTable from './presentation-components/sweet-tree-table.vue';
import sweetVirtualTable from './presentation-components/sweet-virtual-table.vue';
import sweetTree from './presentation-components/sweet-tree.vue';
import sweetVirtualTree from './presentation-components/sweet-virtual-tree.vue';
export default {
  components: { sweetAvatar, sweetImage, sweetDescriptions, sweetCalendar, sweetCollapse, sweetCard, sweetDrawer, sweetTableV2, sweetTreeTable, sweetVirtualTable, sweetTree, sweetVirtualTree },
  data() {
    return {
      activities: [
        {
          content: 'Event start',
          timestamp: '2018-04-15'
        },
        {
          content: 'Approved',
          timestamp: '2018-04-13'
        },
        {
          content: 'Success',
          timestamp: '2018-04-11'
        }
      ],
      tableData: [
        {
          date: '2016/05/02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016/05/04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016/05/01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016/05/03',
          name: '王小虎',
          address:
            '上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  },
}
</script>
<style lang="less" scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
